<template>
    <div class="container">
        <el-form :inline="true" :model="search" class="demo-form-inline">
            <el-form-item label="标题">
                <el-input v-model="search.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="search.content" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="button">
            <el-button @click="dialogVisible = true" type="primary">新增公告</el-button>
        </div>
        <el-table border :data="list" style="width: 100%" class="table">
            <el-table-column prop="id" label="编号" width="100">
            </el-table-column>
            <el-table-column prop="title" label="公告标题">
            </el-table-column>
            <el-table-column prop="content" label="公告内容">
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间" :formatter="dateFormat">
            </el-table-column>
            <el-table-column prop="updatedAt" label="更新时间" :formatter="dateFormat">
            </el-table-column>
            <el-table-column prop="status" label="状态" :formatter="stateFormat">
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!-- 为0的时候可发布 -->
                    <el-button size="mini" type="text" icon="el-icon-lock" :disabled="scope.row.status == 0 ? false : true"
                        @click="freeze(scope.row.id)">
                        发布
                    </el-button>
                    <!-- 为1的时候可回收 -->
                    <el-button size="mini" type="text" icon="el-icon-unlock"
                        :disabled="scope.row.status == 0 ? true : false" @click="unlock(scope.row.id)">回收
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: flex-end; margin-top: 20px">
            <el-pagination v-show="total > 0" :total="total" background @current-change="getList"
                :current-page.sync="search.currentPage" :page-size.sync="search.size" layout="total, prev, pager, next" />
        </div>
        <div>
            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                <el-form :inline="true" :model="newNotice" class="demo-form-inline">
                    <el-form-item label="公告标题" >
                        <el-input placeholder="请输入标题" v-model="newNotice.title"></el-input>
                    </el-form-item>
                    <el-form-item label="公告内容" >
                        <el-input placeholder="请输入内容" v-model="newNotice.content"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
  
<script>
import { noticeFreeze, noticeList, noticeUnlock, addNotice } from '@/api/notice'
import moment from "moment";

export default {
    name: 'UserInfo',
    data() {
        return {
            search: {
                title: '',
                content: '',
                size: 10
            },
            total: 0,
            list: [],
            dialogVisible: false,
            newNotice: {
                title:'',
                content:''
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        onSubmit() {
            addNotice(this.newNotice).then(res => {
                if (res.data) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.getList()
                    this.dialogVisible=false
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                }
            })

        },
        getList() {
            noticeList(this.search).then(res => {
                this.list = res.data.list
                this.total = res.total
                console.log("测试")
                console.log(this.list)
            })
        },
        freeze(id) {
            console.log(id)
            noticeFreeze({ id: id }).then(res => {
                if (res.data) {
                    this.$message({
                        message: '发布成功',
                        type: 'success'
                    })
                    this.getList()
                } else {
                    this.$message({
                        message: '发布失败,已有公告发布，请先撤回',
                        type: 'error'
                    })
                }
            })
        },
        unlock(id) {
            noticeUnlock({ id: id }).then(res => {
                if (res.data) {
                    this.$message({
                        message: '回收成功',
                        type: 'success'
                    })
                    this.getList()
                } else {
                    this.$message({
                        message: '回收失败',
                        type: 'error'
                    })
                }
            })
        },
        onAdd() {
            this.$router.push({ name: "UserRegister" });
        },
        dateFormat(date) {
            return moment(date).format("YYYY年MM月DD日")
        },
        stateFormat(row) {
            console.log(row)
            if (row.status == 1) {
                console.log("状态为" + row.status)
                return "已发布"
            } else {
                console.log("状态为" + row.status)
                return "未发布"
            }
        }
    }
}
</script>
  
<style lang="scss" scoped>
.container {
    padding: 50px;
    display: flex;
    flex-direction: column;

    .button {
        display: flex;
        justify-content: flex-end;
    }

    .table {
        margin-top: 20px;
    }
}
</style>
  